<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="baseForm" :rules="formRules" label-align="right" :modelValue="formData">
				<uni-forms-item label="状态选择" required labelWidth="auto" label-align="right">
					<uni-data-checkbox v-model="formData.status" :localdata="checkinStateData" />
				</uni-forms-item>
				<uni-forms-item label="(入/出)园码" required name="code" labelWidth="auto" label-align="right">
					<uni-easyinput v-model="formData.code" placeholder="请输入(入/出)园码" />
				</uni-forms-item>
			</uni-forms>
			<view class="btn-box">
				<button class="btn1" type="warn" size="mini" @click="doSubmit('baseForm')"> 确定 </button>
				<button class="btn2 ml10" type="warn" size="mini" plain="true" @click="doCancel()"> 取消 </button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		Platform,
		CheckinStateData
	} from "@/static/config.js"
	import request from '@/common/request.js';
	import indexHandler from '../../pages/index/index.js'
	export default {
		props: {
			checkinState: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				checkinStateData: CheckinStateData.slice(0, 2), // 进出状态
				formData: {
					code: "",
					status: "1"
				},
				// 校验规则
				formRules: {
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入(入/出)园码'
						}]
					}
				}
			}
		},
		onLoad() {
			this.setListening(); // 设置监听
		},
		methods: {
			// 设置监听
			setListening() {
				let _self = this;
				uni.$on('bindcardok', function(data) {
					uni.navigateBack();
				})
			},
			doSubmit(ref) {
				let _self = this;
				_self.$refs[ref].validate().then(async res => {
					uni.showLoading({
						title: _self.formData.status == "1" ? '入场中...' : '出场中...',
						mask: false
					});
					//入场//出场
					//1、根据输入的入场码，获取入场信息
					//2、调用入场\出场接口
					await _self.getBookingOrCheckIn(_self.formData.status, _self.formData.code)
				}).catch(err => {
					console.log('err', err);
				})
			},
			getBookingOrCheckIn(state, code) {
				request({
					url: Platform.api_requestUrl + '/stp-checkin/getBookingOrCheckIn',
					data: {
						createTime: code,
						state: state
					},
					method: 'GET',
				}).then(res => {
					if (res.code == 200 && !!res.data) {
						let _data = res.data;
						var record = Platform.tag + "," + _data.id + "," + _data.carcode + "," + _data
							.color;
						switch (state) {
							case "0": // 出
								indexHandler.recordOut(record)
								break;
							case "1": // 进
								indexHandler.recordIn(record)
								break;
							default:
								break;
						}
					}
				}).catch(error => {
					console.log("fail")
				});
			}
		},
		watch: {
			checkinState: {
				handler(item, index) {
					this.formData.status = item
				},
				deep: true
			},
		}
	}
</script>


<style lang="scss" scoped>
	.example {
		padding: 0 15px 15px 15px;
		background-color: #fff;
	}

	/deep/ .example .uni-forms-item__content {
		overflow: auto;
	}

	/deep/ .example .uni-section-header {
		padding: 5px 10px;
	}

	/deep/ .example .uni-input-input {
		text-align: right;
	}

	/deep/ .example .uni-input-placeholder {
		text-align: right;
	}

	/deep/ .example .uni-input-placeholder {
		text-align: right;
	}

	/deep/ .example .uni-easyinput__content {
		border-color: #fff !important;
	}

	/deep/ .example .uni-easyinput__content-input {
		text-align: right;
	}

	/deep/ .example .uni-forms-item__inner {
		border-bottom: 1px solid #e9e9e9;
		padding-bottom: 10px;
		padding-top: 15px;
		width: 100%;
		overflow: hidden;
	}

	/deep/ .example .uni-input {
		text-align: right;
		padding: 0;
	}

	/deep/ .example .uni-date-x {
		padding: 0;
	}

	/deep/ .example .uni-date__x-input {
		padding: 0;
		text-align: right;
	}

	/deep/ .example .uni-date-x--border {
		border: 0;
	}

	.btn-box {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 15px 10px;

		.btn1 {
			width: 90%;
			-webkit-flex: 1;
			background-color: $app-platform-color;
		}

		.btn2 {
			width: 90%;
			-webkit-flex: 1;
			color: $app-platform-color !important;
			border: 1px solid $app-platform-color !important;
		}
	}

	.platecode {
		font-size: 14px;
		margin-top: 7px;
		float: right;
		text-align: right;
	}

	.col-gap {
		width: 100vw;
		height: 12px;
		margin-left: -15px;
		margin-top: -1px;
		background-color: #e9e9e9;
	}

	/* 图片 */
	.add-box {
		padding: 15rpx 0;
		flex-wrap: wrap;
	}

	.add-img-box {
		display: flex;
		width: 100%;
		padding: 0 40rpx;
		padding-left: 10rpx;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.add-img-item {
		/* width:210rpx;
		height:210rpx; */
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
		position: relative;
		/* padding: 9rpx 0; */
		margin: 5rpx 10rpx;
	}

	.add-img-camera {
		flex: 1;
	}

	.add-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
	}

	.add-img-del {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 8rpx;
		top: 17rpx;
		border-radius: 20rpx;
	}
</style>